<template>
  <!-- 基本信息 -->
  <div class="component-stock-bill-basic-info basicInfo-container">
    <!-- native modifier has been removed, please confirm whether the function has been affected  -->
    <el-form
      ref="dataFormRef"
      label-width="auto"
      :model="dataForm"
      :rules="rules"
      @submit.prevent
    >
      <span class="title">{{ $t('product.basicInformation') }}</span>
      <el-divider />
      <!-- 基本信息 -->
      <el-form-item
        :label="type === 1 ? $t('stock.deliveryDate') : $t('stock.warehousingDate')"
        prop="businessTime"
      >
        <el-date-picker
          v-model="dataForm.businessTime"
          type="date"
          :placeholder="$t('admin.seleData')"
          value-format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="disabledDate"
          class="el-date-picker"
        />
      </el-form-item>
      <el-form-item
        ref="stockChangeReasonIdRef"
        :label="type === 1 ? $t('stock.deliveryReason') : $t('stock.warehousingReason')"
        prop="stockChangeReasonId"
      >
        <el-select
          v-model="dataForm.stockChangeReasonId"
          :placeholder="$t('tip.select')"
          @change="selectReason"
        >
          <el-option
            v-for="node in reasonList"
            :key="node.stockChangeReasonId"
            :label="node.reason"
            :value="node.stockChangeReasonId"
          />
        </el-select>
        <!--新建/刷新-->
        <div class="create-refresh-btn">
          <div
            class="default-btn text-btn"
            @click="getReasonList"
          >
            {{ $t('admin.refresh') }}
          </div>
          <el-divider direction="vertical" />
          <div
            class="default-btn text-btn"
            @click.stop="createReason()"
          >
            {{ $t('admin.newConstruction') }}
          </div>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('publics.remark')"
        prop="remark"
      >
        <el-input
          v-model="dataForm.remark"
          class="remark"
          maxlength="50"
          type="textarea"
          show-word-limit
          :row="5"
        />
      </el-form-item>
      <!-- 附件 -->
      <span class="title">{{ $t('stock.appendix') }}</span>
      <el-divider />
      <el-form-item :label="type === 1 ? $t('stock.deliveryCertificate') : $t('stock.warehousingCertificate')">
        <div>
          <div class="business-qual">
            <imgs-upload
              v-model="dataForm.qualifications"
              :limit="4"
              :prompt="false"
            />
          </div>
          <div class="upload-tips">
            {{ type === 1 ? $t('stock.businessOutQualTips') : $t('stock.businessInQualTips') }}
          </div>
        </div>
      </el-form-item>
    </el-form>
    <reason-add-or-update
      v-if="reasonAddOrUpdateVisible"
      ref="reasonAddOrUpdateRef"
      @refresh-data-list="getReasonList"
    />
  </div>
</template>

<script setup>
import reasonAddOrUpdate from './customizereason-add-or-update.vue'

const props = defineProps({
  type: {
    default: 0,
    type: Number // 1 出库 2 入库
  },
  stockBillLogId: {
    default: 0,
    type: Number
  }
})
const dataForm = ref({
  stockBillLogId: null,
  businessTime: '', // 出入库时间
  stockChangeReasonId: '', // 出入库原因id
  remark: '', // 出入库备注信息
  qualifications: '', // 出入库凭证
  status: ''
})
const reasonAddOrUpdateVisible = ref(false)
const reasonList = ref([]) // 出入库原因
// 出入库日期选择限制
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const rules = {
  businessTime: [
    { required: true, message: props.type === 1 ? $t('stock.deliveryDateNotEmpty') : $t('stock.warehousingDateNotEmpty'), trigger: 'blur' }
  ],
  stockChangeReasonId: [
    { required: true, message: props.type === 1 ? $t('stock.deliveryReasonNotEmpty') : $t('stock.warehousingReasonNotEmpty'), trigger: 'blur' }
  ]
}
onMounted(() => {
  init()
})

const init = () => {
  if (props.stockBillLogId) {
    getStockBillInfo()
  } else {
    // 初始化出入库原因
    getReasonList()
  }
}
const getStockBillInfo = () => {
  http({
    url: http.adornUrl('/shop/stockBillLog/info/' + props.stockBillLogId),
    method: 'get',
    params: http.adornParams(
      {
        stockBillLogId: props.stockBillLogId
      }
    )
  }).then(({ data }) => {
    dataForm.value = data
    getReasonList()
  })
}
const stockChangeReasonIdRef = ref(null)
const selectReason = () => {
  stockChangeReasonIdRef.value?.clearValidate()
}
const reasonAddOrUpdateRef = ref(null)
const createReason = () => {
  reasonAddOrUpdateVisible.value = true
  nextTick(() => {
    reasonAddOrUpdateRef.value.init(null, props.type)
  })
}
/**
 * 获取出入库原因
 */
const getReasonList = () => {
  http({
    url: http.adornUrl('/shop/stockChangeReason/list'),
    method: 'get',
    params: http.adornParams(
      {
        status: 1,
        type: props.type
      }
    )
  }).then(({ data }) => {
    if (data && props.stockBillLogId && dataForm.value) {
      let isExist = false
      for (let i = 0; i < data.length; i++) {
        if (data[i].stockChangeReasonId === dataForm.value.stockChangeReasonId) {
          isExist = true
        }
      }
      if (!isExist) {
        dataForm.value.stockChangeReasonId = null
      }
    }
    reasonList.value = data
  })
}
/**
 * 校验表单数据，校验成功返回表单数据，校验失败返回null (父组件调用）
 */
const dataFormRef = ref(null)
const verifyDataForm = async () => {
  let flag = false
  await dataFormRef.value?.validate(valid => {
    if (valid) {
      flag = true
    }
  })
  if (flag) {
    dataForm.value.type = props.type
    return dataForm.value
  } else {
    return null
  }
}

defineExpose({ verifyDataForm })
</script>

<style lang="scss" scoped>

.component-stock-bill-basic-info.basicInfo-container {
  .title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .el-date-picker {
    width: 200px;
  }
  :deep(.el-select) {
    width: 200px;
  }
  .remark {
    width: 30%;
  }
  .upload-tips {
    font-size: 12px;
    color: #999;
    height: 16px;
    line-height: 20px;
    margin-top: 13px;
  }
  .create-refresh-btn {
    display: inline-block;
    margin-left: 10px;
    & :deep(.el-divider--vertical) {
      margin: 0 2px;
    }
  }
}
// 刷新 | 新建

</style>
